<template>
  <div class="homePage-main">
    <HeardCards></HeardCards>
    <div class="homePage-main-content">
      <div class="left">
        <Echart></Echart>
      </div>
      <div class="right">
        <Rank></Rank>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import HeardCards from './heardCards/index.vue'
  import Echart from './echart/index.vue'
  import Rank from './rank/index.vue'
</script>

<style lang="scss" scoped>
  .homePage-main {
    margin: 20px;
    .homePage-main-content {
      display: flex;
      justify-content: space-between;
      .left {
        width: 68%;
        display: flex;
        flex-direction: column;
      }
      .right {
        width: 32%;
      }
    }
  }
</style>
